{extend name="public/base" /}
{block name="css"}
{load href="https://ujia-res.oss-cn-shenzhen.aliyuncs.com/common/third-party/swiper/5.0.3/dist/swiper.min.css" /}
<style>
  .main-container {
    background: #F4F4F4;
    text-align: center;
  }

  .ztsj {
    width: 110px;
    height: 32px;
    line-height: 32px;
    text-align: center;
    background: #AF995F;
    font-size: 16px;
    color: #ffff;
    cursor: pointer;
    border-radius: 18px;
  }

  .zxzx {
    width: 110px;
    height: 32px;
    line-height: 32px;
    text-align: center;
    background: #AF995F;
    cursor: pointer;
    border-radius: 18px;
    font-size: 16px;
    color: #ffffff
  }
</style>
{/block}
{block name="main"}
<section class="container-fluid main-container">
  <img alt class="img-fluid page-banner" src="https://ujia-img.oss-cn-shenzhen.aliyuncs.com/beauthome/cases/pc/banner.png" />
  <div>
    <div class="mx-auto" style="max-width: 1200px;height: 60px;display: flex;align-items: center;">
      <a href="{$Request.root.true}" style="color: #999999">首页</a><span style="color: #999999;margin: 0 6px 0 10px">/</span> <a href="{$Request.root}/cases.html" style="color: #999999;margin: 0 0 0 0">服务案例</a> <span style="color: #999999;margin: 0 6px">/</span><span>{$case.building}</span>
    </div>
  </div>
  {eq name="$tdk['title']" value="案例详情-致美优家"}
  <div class="d-flex flex-column" style="padding: 10% 0;background:#FAFAFA;">
    <img style="width: 10%;margin: 0 auto" src="https://ujia-img.oss-cn-shenzhen.aliyuncs.com/changehome/empty.svg" alt="文章内容不存在" />
    <p style="color: #999999">案例详情不存在(´･_･`)</p>
  </div>
  {else/}
  <div class="d-flex flex-column container-fluid" style="background:#FAFAFA;position: relative">
    <div class="mx-auto" style="display: flex;max-width: 1200px;justify-content: space-between;margin: 25px 0">
      <div style="width: 860px;border: 1px solid #DCDCDC;padding: 20px 0;background: #FFFFFF">
        <div style="display: flex;justify-content: space-between;padding: 0 20px">
          <div style="color: #333333;font-size: 18px">{$case.building}</div>
          <div>{$case.housing} | {$case.area}m² | {$case.case_style|getStyle}</div>
        </div>
        <hr style="margin: 20px"/>
        <div style="padding: 0 20px">
        <div style="text-align: left;color: #333333;font-size: 18px">{$case.title}</div>
        <div style="text-align: left;color: #999999;margin: 20px 0;display: flex;justify-content: space-between">
          <div>编辑：{$case.author}  <span style="margin-left: 20px">时间：{$case.create_time}</span></div>
          <div><img style="width: 16px;margin-right: 5px" src="https://u-res.oss-cn-chengdu.aliyuncs.com/web/ZMYJ/assets/img/liulanliang.png" />{$case.view_count} 次</div>
        </div>
        </div>
        <div style="padding: 10px">{$case.content|raw}</div>
      </div>
      <div data-sticky-container class="sidebar" style="width: 340px;max-width:340px;margin-left: 20px">
        <div >
        <div id="right-nav" style="width: 340px;max-width:340px;z-index: 999">
          <div style="border: 1px #CCCCCC solid;padding: 20px;background: #ffffff;z-index: 2">
            <div style="display: flex; align-items: center;justify-content: space-between; color: #884233; font-size: 19px;font-weight: 400">案例设计师<span style="color:#884233;font-size: 14px;">已有{$case.appointment_count}人预约</span></div>
            <hr>
            <div style="display: flex;align-items: center;margin-top: 30px">
              <div style="flex: .8"><img alt="" class="img-responsive" style="width: 110px" src="{$case.avatar}"></div>
              <div style="flex: 1;text-align: left;margin-left: 15px">
                <p style="font-size: 19px;font-weight: bold; color: #333333">{$case.nick_name|default=$case.name}</p>
                <p style="font-size: 16px;color: #333333">{$case.type|getDesignerType}</p>
                <p style="margin-top: 10px;color: #333333;font-size: 15px;">擅长：{$case.style}</p>
                <p style="margin-top: 10px;color: #999999;font-size: 13px">理念：{$case.intro|default='-'}</p>
              </div>
            </div>
            <div style="display: flex;justify-content: space-between;margin: 10px 0;padding: 0 20px">
              <div class="ztsj" onclick="window.page_position='设计师:{$case.name}';showAppointmentLayer();$('#enroll-title').text('预约设计师');">找Ta设计</div>
              <div class="zxzx" onclick="window.open('https://tb.53kf.com/code/client/5a94a95735e35494ea43bac6762f40560/1')">在线咨询</div>
            </div>
          </div>
      </div>
    <div data-sticky data-margin-top="50" style="position: relative;width: 340px;background: #FFFFFF;z-index: 0">
        <div style="border: 1px #CCCCCC solid;padding: 20px;margin-top: 20px">
          <div style="text-align:left;font-size: 19px;font-weight: 400">相关案例推荐</div>
          <hr>
          <div>
            {volist name="relevant" id="v"}
            <div onclick="window.location.href='{$Request.root}/case/{$v.id}.html'" style="margin-bottom: 15px;position: relative;cursor: pointer">
              <img alt="" class="img-responsive" style="width: 300px;height: 180px" src="{$v.cover}">
              <div style="position: absolute; bottom:0;left:0;background: rgba(10,10,10,.55);
height: 35px;
width: 100%;color: #ffffff;text-align: center;line-height: 35px">{$v['building']} | {$v['area']}m² | {$v['housing']}</div>
            </div>
            {/volist}
          </div>
        </div>
    </div>
    </div>
  </div>
    </div>
    {/eq}
    </div>
</section>
{/block}
{block name="js"}
{load href="https://ujia-res.oss-cn-shenzhen.aliyuncs.com/common/third-party/swiper/5.0.3/dist/swiper.min.js" /}
{load href="https://res.bestyoujia.com/common/third/sticky.compile.js" /}
<script>
  $('.navbar-nav').children('li').eq(4).addClass('nav-active');

  const imgDom = document.querySelectorAll('img');
  for (let i = 0; i < imgDom.length; i++) {
    if (imgDom[i].src.match("jpg")) {
      imgDom[i].src = `${imgDom[i].src}?x-oss-process=image/format,jpg/interlace,1`;
    }
  }

  const sticky = new Sticky('[data-sticky]');
</script>
{/block}